/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-08-10 08:32:33
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-12 17:16:58
 * @FilePath: /legion-iot/src/pages/dashboard/components/Map.jsx
 * @Description:
 * 《
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import React, { useState, useRef ,memo} from "react";
import ReactECharts from "echarts-for-react";
import "echarts-gl"; // 导入 3D 地图模块
import { useAsyncEffect } from "ahooks";
import { doFetch, getFetch } from "@/utils/doFetch";
import geoJson from "./geojson/map.json";
import * as echarts from "echarts";
import data from "../mock";
import { Modal } from "antd";
import { history } from "umi";

const scoreColor = {
  如皋科技创业园: {
    color: "#3acafa",
    key: "rgc",
  },
  万林名都城: {
    color: "#e2ee05",
    key: "wlm",
  },
  景盛家园: {
    color: "#3acafa",
    key: "jsj",
  },
  西欧名邸: {
    color: "#a4e7fe",
    key: "xom",
  },
  和平家园: {
    color: "#a4e7fe",
  },
  金色世纪公寓: {
    color: "#a4e7fe",
  },
  玫瑰花园: {
    color: "#ff4800",
  },
};

function loadMap(name, regions, setOption) {
  let options = {
    geo3D: {
      map: name,
      regionHeight: 1,
      //show: false,
      aspectScale: 1, //长宽比
      zoom: 0.4,
      label: {
        show: false,
      },
      regions: regions,
    },
    series: [
      {
        name: "MAP",
        type: "map3D",
        map: name,
        label: {
          show: true,
          textStyle: {
            color: "#fff",
          },
          formatter: (params) => {
            return params?.name;
          },
          borderRadius: 4,
        },
        itemStyle: {
          color: "transparent",
          borderColor: "transparent",
          borderWidth: 1,
        },
        aspectScale: 1, //长宽比
      },
    ],
  };
  setOption(options);
}

function Amap({ mode, setkey }) {
  const [option, setOption] = useState({});
  useAsyncEffect(async () => {
    // 全国地图
    let city = [];
    let color = [
      "#3acafa", //you
      "#ff4800", //cha
      "#e2ee05", //zhong
      "#a4e7fe", //liang
      "#3acafa", //you
      "#ff4800", //cha
      "#e2ee05", //zhong
      "#a4e7fe", //liang
      "#3acafa", //you
      "#ff4800", //cha
      "#e2ee05", //zhong
      "#a4e7fe", //liang
      "#3acafa", //you
      "#ff4800", //cha
      "#e2ee05", //zhong
      "#a4e7fe", //liang
    ];
    let regions = [];

    echarts.registerMap("chinamap", geoJson);
    for (let i = 0; i < geoJson.features.length; i++) {
      city.push(geoJson.features[i].properties.name);
    }
    for (let i = 0; i < city.length; i++) {
      regions.push({
        name: city[i],
        regionHeight: 0.8,
        itemStyle: {
          color: scoreColor?.[city[i]]?.color ?? color[i],
        },
      });
    }
    loadMap("chinamap", regions, setOption);
  }, [echartsRef]);

  const echartsRef = useRef();

  const onChartClick = (params) => {
    setkey(scoreColor[params.name]?.key??"all");
  };

  const onChartdbClick = (params) => {
    setkey(scoreColor[params.name]?.key??'all');
    const it = data[scoreColor[params.name]?.key];
    if (!it?.score_list) {
      return;
    }
    Modal.info({
      closable: true,
      title: `请选择${it?.title}下的楼栋`,
      content: (
        <div>
          {it?.score_list?.map((its, i) => {
            return (
              <div
                key={i}
                className="item"
                onClick={() => {
                  history.push(
                    `/dashboard3d?name=${it?.title}&dong=${i + 1}&score=${its}`
                  );
                  Modal.destroyAll();
                }}
              >
                <b>{i + 1}栋</b>
                <span
                  style={{
                    color:
                      its < 50 ? "#ff4800" : its < 70 ? "#1a9c00" : "#0274ff",
                  }}
                >
                  {its}分
                </span>
              </div>
            );
          })}
        </div>
      ),
      footer: false,
      getContainer: () => document.getElementById("cons"),
    });
  };
  const onEvents = {
    mouseover: onChartClick,
    click: onChartdbClick,
  };

  return (
    <div className={mode == "light" ? "lmapbg" : "mapbg"}>
      <ReactECharts
        ref={echartsRef}
        option={option}
        style={{ width: "100%", height: "100%" }}
        onEvents={onEvents}
      />
    </div>
  );
}

export default memo(Amap,(prev,next)=>{
  if(prev.mode !== next.mode){
    return false
  }
  return true
});
